<!DOCTYPE html>
<html>
<head>
<title>Org Chart Extras</title>
<meta name="description" content="An org chart that also shows non-tree-structure relationships." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
<script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
        {
          initialContentAlignment: go.Spot.Center,
          // make sure users can only create trees
          validCycle: go.Diagram.CycleDestinationTree,
          // users can select only one part at a time
          maxSelectionCount: 1,
          layout:
            $(go.TreeLayout,
              {
                treeStyle: go.TreeLayout.StyleLastParents,
                arrangement: go.TreeLayout.ArrangementHorizontal,
                // properties for most of the tree:
                angle: 90,
                layerSpacing: 35,
                // properties for the "last parents":
                alternateAngle: 0,
                alternateLayerSpacing: 35,
                alternateAlignment: go.TreeLayout.AlignmentStart,
                alternateNodeIndent: 10,
                alternateNodeIndentPastParent: 1.0,
                alternateNodeSpacing: 10,
                alternateLayerSpacing: 30,
                alternateLayerSpacingParentOverlap: 1.0,
                alternatePortSpot: new go.Spot(0.01, 1, 10, 0),
                alternateChildPortSpot: go.Spot.Left
              }),
          // support editing the properties of the selected person in HTML
          "ChangedSelection": onSelectionChanged,
          "TextEdited": onTextEdited,
          // enable undo & redo
          "undoManager.isEnabled": true
        });

    // when the document is modified, add a "*" to the title and enable the "Save" button
    myDiagram.addDiagramListener("Modified", function(e) {
      var button = document.getElementById("SaveButton");
      if (button) button.disabled = !myDiagram.isModified;
      var idx = document.title.indexOf("*");
      if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
      } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
      }
    });

    var graygrad = $(go.Brush, "Linear",
                     { 0: "rgb(125, 125, 125)", 0.5: "rgb(86, 86, 86)", 1: "rgb(86, 86, 86)" });

    // when a node is double-clicked, add a child to it
    function nodeDoubleClick(e, obj) {
      var clicked = obj.part;
      if (clicked !== null) {
        var thisemp = clicked.data;
        myDiagram.startTransaction("add employee");
        var nextkey = (myDiagram.model.nodeDataArray.length + 1).toString();
        var newemp = { key: nextkey, name: "(new person)", title: "" };
        myDiagram.model.addNodeData(newemp);
        myDiagram.model.addLinkData({ from: thisemp.key, to: nextkey });
        myDiagram.commitTransaction("add employee");
      }
    }

    // this is used to determine feedback during drags
    function mayWorkFor(node1, node2) {
      if (!(node1 instanceof go.Node)) return false;  // must be a Node
      if (node1 === node2) return false;  // cannot work for yourself
      if (node2.isInTreeOf(node1)) return false;  // cannot work for someone who works for you
      return true;
    }

    // This function provides a common style for most of the TextBlocks.
    // Some of these values may be overridden in a particular TextBlock.
    function textStyle() {
      return { font: "9pt sans-serif", stroke: "white" };
    }

    // define the Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { doubleClick: nodeDoubleClick },
        { // handle dragging a Node onto a Node to (maybe) change the reporting relationship
          mouseDragEnter: function (e, node, prev) {
            var diagram = node.diagram;
            var selnode = diagram.selection.first();
            if (!mayWorkFor(selnode, node)) return;
            var shape = node.findObject("SHAPE");
            if (shape) shape.fill = "darkred";
          },
          mouseDragLeave: function (e, node, next) {
            var shape = node.findObject("SHAPE");
            if (shape) shape.fill = graygrad;
          },
          mouseDrop: function (e, node) {
            var diagram = node.diagram;
            var selnode = diagram.selection.first();  // assume just one Node in selection
            if (mayWorkFor(selnode, node)) {
              // find any existing link into the selected node
              var link = selnode.findTreeParentLink();
              if (link !== null) {  // reconnect any existing link
                link.fromNode = node;
              } else {  // else create a new link
                diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
              }
            }
          }
        },
        { // this tooltip Adornment is shared by all nodes
          toolTip:  //??
            $(go.Adornment, "Auto",
              $(go.Shape, { fill: "#FFFFCC" }),
              $(go.TextBlock, { margin: 4 },  // the tooltip shows the result of calling nodeInfo(data)
                new go.Binding("text", "", function(a) {
                  return a.adornedPart._treeParentNode + "\n" + a.adornedPart.findTreeParentNode();
                }).ofObject()))
        },
        // for sorting, have the Node.text be the data.name
        new go.Binding("text", "name"),
        // bind the Part.layerName to control the Node's layer depending on whether it isSelected
        new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),
        // define the node's outer shape
        $(go.Shape, "RoundedRectangle",
          {
            name: "SHAPE",
            fill: graygrad, stroke: "black",
            portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
          }),
        // define the panel where the text will appear
        $(go.Panel, "Table",
          {
            maxSize: new go.Size(150, 999),
            margin: new go.Margin(3, 3, 0, 3),
            defaultAlignment: go.Spot.Left
          },
          $(go.RowColumnDefinition, { column: 2, width: 4 }),
          $(go.TextBlock,  // the name
            {
              row: 0, column: 0, columnSpan: 5,
              font: "bold 9pt sans-serif",
              editable: true, isMultiline: false,
              stroke: "white", minSize: new go.Size(10, 14)
            },
            new go.Binding("text", "name").makeTwoWay()),
          $(go.TextBlock, "Title: ", textStyle(),
            { row: 1, column: 0 }),
          $(go.TextBlock, textStyle(),
            {
              row: 1, column: 1, columnSpan: 4,
              editable: true, isMultiline: false,
              minSize: new go.Size(10, 14),
              margin: new go.Margin(0, 0, 0, 3)
            },
            new go.Binding("text", "title").makeTwoWay()),
          $(go.TextBlock, "ID: ", textStyle(),  // the ID and the boss
            { row: 2, column: 0 }),
          $(go.TextBlock, textStyle(),
            { row: 2, column: 1 },
            new go.Binding("text", "key")),
          $(go.TextBlock, "Boss: ", textStyle(),
            { row: 2, column: 3 }),
          $(go.TextBlock, textStyle(),
            { row: 2, column: 4, },
            new go.Binding("text", "parent")),
          $(go.TextBlock,  // the comments
            {
              row: 3, column: 0, columnSpan: 5,
              font: "italic 9pt sans-serif",
              wrap: go.TextBlock.WrapFit,
              editable: true,  // by default newlines are allowed
              stroke: "white",
              minSize: new go.Size(10, 14)
            },
            new go.Binding("text", "comments").makeTwoWay()),
          $("TreeExpanderButton",
            { row: 4, columnSpan: 99, alignment: go.Spot.Center })
        )  // end Table Panel
      );  // end Node

    // define the Link template
    myDiagram.linkTemplate =
      $(go.Link, go.Link.Orthogonal,
        { corner: 5, relinkableFrom: true, relinkableTo: true },
        $(go.Shape, { strokeWidth: 2 }));  // the link shape

    myDiagram.linkTemplateMap.add("Support",
      $(go.Link, go.Link.Bezier,
        { isLayoutPositioned: false, isTreeLink: false, curviness: -50 },
        { relinkableFrom: true, relinkableTo: true },
        $(go.Shape,
          { stroke: "green", strokeWidth: 2 }),
        $(go.Shape,
          { toArrow: "OpenTriangle", stroke: "green", strokeWidth: 2 }),
        $(go.TextBlock,
          new go.Binding("text", "text"),
          { stroke: "green", background: "rgba(255,255,255,0.75)",
            maxSize: new go.Size(80, NaN)
          })));

    myDiagram.linkTemplateMap.add("Motion",
      $(go.Link, go.Link.Bezier,
        { isLayoutPositioned: false, isTreeLink: false, curviness: -50 },
        { relinkableFrom: true, relinkableTo: true },
        $(go.Shape,
          { stroke: "orange", strokeWidth: 2 }),
        $(go.Shape,
          { toArrow: "OpenTriangle", stroke: "orange", strokeWidth: 2 }),
        $(go.TextBlock,
          new go.Binding("text", "text"),
          { stroke: "orange", background: "rgba(255,255,255,0.75)",
            maxSize: new go.Size(80, NaN)
          })));

    // read in the JSON-format data from the "mySavedModel" element
    load();
  }

  // Allow the user to edit text when a single node is selected
  function onSelectionChanged(e) {
    var node = e.diagram.selection.first();
    if (node instanceof go.Node) {
      updateProperties(node.data);
    } else {
      updateProperties(null);
    }
  }

  // Update the HTML elements for editing the properties of the currently selected node, if any
  function updateProperties(data) {
    if (data === null) {
      document.getElementById("propertiesPanel").style.display = "none";
      document.getElementById("name").value = "";
      document.getElementById("title").value = "";
      document.getElementById("comments").value = "";
    } else {
      document.getElementById("propertiesPanel").style.display = "block";
      document.getElementById("name").value = data.name || "";
      document.getElementById("title").value = data.title || "";
      document.getElementById("comments").value = data.comments || "";
    }
  }

  // This is called when the user has finished inline text-editing
  function onTextEdited(e) {
    var tb = e.subject;
    if (tb === null || !tb.name) return;
    var node = tb.part;
    if (node instanceof go.Node) {
      updateData(tb.text, tb.name);
      updateProperties(node.data);
    }
  }

  // Update the data fields when the text is changed
  function updateData(text, field) {
    var node = myDiagram.selection.first();
    // maxSelectionCount = 1, so there can only be one Part in this collection
    var data = node.data;
    if (node instanceof go.Node && data !== null) {
      var model = myDiagram.model;
      model.startTransaction("modified " + field);
      if (field === "name") {
        model.setDataProperty(data, "name", text);
      } else if (field === "title") {
        model.setDataProperty(data, "title", text);
      } else if (field === "comments") {
        model.setDataProperty(data, "comments", text);
      }
      model.commitTransaction("modified " + field);
    }
  }

  // Show the diagram's model in JSON format
  function save() {
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="background-color: white; border: solid 1px black; height: 550px"></div>
  <div>
    <div id="propertiesPanel" style="display: none; background-color: aliceblue; border: solid 1px black">
      <b>Properties</b><br />
      Name: <input type="text" id="name" value="" onchange="updateData(this.value, 'name')" /><br />
      Title: <input type="text" id="title" value="" onchange="updateData(this.value, 'title')" /><br />
      Comments: <input type="text" id="comments" value="" onchange="updateData(this.value, 'comments')" /><br />
    </div>
  </div>
  <p>
    Double click on a node in order to add a person.
    Drag a node onto another in order to change relationships.
    You can also draw a link from a node's background to other nodes that have no "boss".
  </p>
  <p>
    This is the <a href="orgChartEditor.html">Org Chart Editor</a> sample,
    but each node includes a TreeExpanderButton,
    and there are additional non-tree links connecting some of the nodes.
  </p>
  <div>
    <div>
      <button id="SaveButton" onclick="save()">Write</button>
      <button onclick="load()">Read</button>
      Diagram Model saved in JSON format:
    </div>
    <textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":"1", "name":"Corrado 'Junior' Soprano", "title":"The Boss"},
{"key":"2", "name":"Tony Soprano", "title":"Underboss"},
{"key":"3", "name":"Herman 'Hesh' Rabkin", "title":"Advisor"},
{"key":"4", "name":"Paulie Walnuts", "title":"Capo"},
{"key":"5", "name":"Ralph Cifaretto", "title":"Capo MIA"},
{"key":"6", "name":"Silvio Dante", "title":"Consigliere"},
{"key":"7", "name":"Bobby Baccilien", "title":"Capo"},
{"key":"8", "name":"Sal Bonpensiero", "title":"MIA"},
{"key":"9", "name":"Christopher Moltisanti", "title":"Made Man"},
{"key":"10", "name":"Furio Giunta", "title":"Muscle"},
{"key":"11", "name":"Patsy Parisi", "title":"Accountant"}
 ],
  "linkDataArray": [
{"from":"1", "to":"2"},
{"from":"1", "to":"3"},
{"from":"2", "to":"4"},
{"from":"2", "to":"5"},
{"from":"2", "to":"6"},
{"from":"2", "to":"7"},
{"from":"4", "to":"8"},
{"from":"4", "to":"9"},
{"from":"4", "to":"10"},
{"from":"4", "to":"11"},
{"from":"11", "to":"6", "category":"Support", "text":"50% support"},
{"from":"9", "to":"7", "category":"Motion", "text":"will change here in 2 months"}
 ]
}
    </textarea>
  </div>
</div>
</body>
</html>
